<script setup>
import {reactive} from 'vue'
  let arr = [1,2,3,4,5,6,7,8,-1,-2,-3,-4,-5,-6,-7,-8]
  let newArr = reactive([])
  while(arr.length>0){ 
    // 这里索引要减1
      let value = arr.splice(Math.floor(Math.random()*arr.length+1)-1,1)[0]
      let obj = {
        value,            //数值
        showNumber:false, //是否展现数值
        showCard:true,   //卡片是否被销毁
        nowClass:'back'  //卡片的背景
      }
      newArr.push(obj)
  }
  let flag = 0
  let wathCardArr=[]
  function wathCard(item){
    // 在页面还没消失的时候不能点,点击已经点击过的也不行
    if(flag == 2 || !item.showCard ) return
    // flag++
    // console.log(e);
    // console.dir(e.srcElement);
    // // 这个表示选中元素的aaadata值
    // console.dir(e.srcElement.attributes.aaadata.value);
    // wathCardArr.push(e.srcElement)
    // if(flag == 2){
    //   if(wathCardArr[0].attributes.aaadata.value == -wathCardArr[1].attributes.aaadata.value){
        
    //   }
    //   // 点完两次就重置
    //   wathCardArr = []
    //   flag =0
    // }
    console.log(flag);
    // 记录点击次数
    flag++
    // 更新点击页面
    item.showNumber = true
    item.nowClass = 'view'
    wathCardArr.push(item)
    
    if(flag == 2){
      // 用定时器为了不点第二下一下子消失
      setTimeout(()=>{
        // 如果相等，就消除
        if(wathCardArr[0].value == -wathCardArr[1].value){
          wathCardArr[0].showCard = false
          wathCardArr[1].showCard = false
          // 不相等就翻面
        }else{
          wathCardArr[0].nowClass = 'back'
          wathCardArr[1].nowClass = 'back'
        }
        wathCardArr[0].showNumber = false
        wathCardArr[1].showNumber = false
        // 清除计点器
        flag = 0
        wathCardArr = []
      },500)
      
    }
  }

</script>

<template>
  <div id="root">
    <div class="main">
      <div class="card" v-for="item in newArr"  :key="item" :aaadata="item" @click="wathCard(item)" :class="item.nowClass" >
          <div v-show="item.showNumber" :class="item.value>0 ? 'red' : 'black'">{{item.value}}</div>
      </div>
    </div>
      
  </div>
</template>

<style scoped>
  #root{
    width: 100%;
    height:100%;
  }
  .main{
    height:420px;
    width: 420px;
    position: relative;
    top: 50%;
    left:50%;
    transform: translate(-50%,-50%);
  }
  .card{
    width: 100px;
    height: 100px;
    border: 1px solid black;
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .back{
    background-color: rgb(52, 184, 245);
  }
  .view{
    background-color: rgb(244, 244, 244);
  }
  .black{
    color: black;
  }
  .red{
    color: red;
  }
</style>
